<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-18 17:11:59
 * @LastEditTime: 2024-06-24 10:39:35
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 拖拽设计区域
 * @FilePath: \chu-meng\client\src\pages\Design\components\DesignArea\DragDesignArea\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="dragDesignArea">
    <a href="javascript:void(0)" @click="addGridItem">添加</a>
    <grid-layout
      v-model:layout="layout"
      :col-num="5"
      :row-height="150"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="false"
      :margin="[10, 10]"
      :use-css-transforms="true"
      :prevent-collision="true"
    >
      <!-- 确保在其他 item 下面，放在第一个的会在最下面 -->
      <grid-item
        v-for="item in backLayout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        :is-draggable="false"
        :is-resizable="false"
        class="backGridItem"
      >
        {{ item.i }}
      </grid-item>
      <!-- 真正的layout数据 -->
      <grid-item
        v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        :vertical-compac="false"
        @move="moveEvent"
        @moved="movedEvent"
        @resize="resizeEvent"
        @resized="resizedEvent"
        class="gridItem"
      >
        {{ item.i }}
      </grid-item>
    </grid-layout>
  </div>
</template>

<script setup>
// import {
//   FileOutlined,
//   CloseOutlined
// } from '@ant-design/icons-vue'
import { onMounted, ref, reactive } from 'vue'
const backLayout = [
  { x: 0, y: 0, w: 1, h: 1, i: "0" },
  { x: 1, y: 0, w: 1, h: 1, i: "1" },
  { x: 2, y: 0, w: 1, h: 1, i: "2" },
  { x: 3, y: 0, w: 1, h: 1, i: "3" },
  { x: 4, y: 0, w: 1, h: 1, i: "4" },

  { x: 0, y: 1, w: 1, h: 1, i: "10" },
  { x: 1, y: 1, w: 1, h: 1, i: "11" },
  { x: 2, y: 1, w: 1, h: 1, i: "12" },
  { x: 3, y: 1, w: 1, h: 1, i: "13" },
  { x: 4, y: 1, w: 1, h: 1, i: "14" },

  { x: 0, y: 2, w: 1, h: 1, i: "20" },
  { x: 1, y: 2, w: 1, h: 1, i: "21" },
  { x: 2, y: 2, w: 1, h: 1, i: "22" },
  { x: 3, y: 2, w: 1, h: 1, i: "23" },
  { x: 4, y: 2, w: 1, h: 1, i: "24" },

  { x: 0, y: 3, w: 1, h: 1, i: "30" },
  { x: 1, y: 3, w: 1, h: 1, i: "31" },
  { x: 2, y: 3, w: 1, h: 1, i: "32" },
  { x: 3, y: 3, w: 1, h: 1, i: "33" },
  { x: 4, y: 3, w: 1, h: 1, i: "34" },
]

const layout = ref([
  { x: 0, y: 0, w: 1, h: 1, i: "0" },
  { x: 3, y: 3, w: 1, h: 1, i: "1" }
])

const layoutMap = ref([])

// 初始化
onMounted(() => {
  layoutMap.value = JSON.parse(JSON.stringify(layout.value))
})

// 添加 grid-item
const addGridItem = () => {
  layout.value.push({
    x: 1,
    y: 2,
    w: 1,
    h: 1,
    i: layout.value.length + 1
  })
}

// 删除 grid-item
const deleteGridItem = (i) => {
  layout.value.findIndex((item) => item.i === i)
}

// 交换位置：
const changePosition = (item1, item2) => {
  console.log(item1, item2);
  // 定义中间变量交换
  const temp = JSON.parse(JSON.stringify(item1))
  //   注意：修改的是影响显示的实际数组 layout
  layout.value.forEach((item) => {
    // 找到 item1,将 item1 的信息换成item2
    if (item.i === item1.i) {
      item.x = item2.x
      item.y = item2.y
    }
    if (item.i === item2.i) {
      item.x = temp.x
      item.y = temp.y
    }
  })
  // 实现交换后，及时同步 数据映射
  layoutMap.value = JSON.parse(JSON.stringify(layout.value))
}

// 移动时的事件
const moveEvent = (i, newX, newY) => {
  console.log("移动中--move", i, newX, newX)
  // 1 根据移动位置，循环数据源当前位置是否有元素,不包含自己的位置
  const findItem = layoutMap.value.find(
    (item) => item.x === newX && item.y === newY && item.i !== i
  )
  if (!findItem) return
  console.log('--找到了', findItem)
  changePosition(
    layout.value.find((item) => item.i === i),
    findItem
  )
}

// 移动后的事件
const movedEvent = (i, newX, newY) => {
}

// 调整大小时的事件
const resizeEvent = (i, newH, newW, newHPx, newWPx) => {
}

// 调整大小后的事件
const resizedEvent = (i, newH, newW, newHPx, newWPx) => {
}

</script>

<style lang="scss" scoped>
.dragDesignArea{
  width: 100%;
  height: calc(100vh - 177px);
  overflow: hidden;
  // background-color: #031e2c;

  .backGridItem {
    border: dashed #ccc 1px;
  }
  .gridItem{
    background: green;
  }
}
</style>
